<script setup lang="ts">
const tabIndex = ref(0);
const handleTab = (index: number) => {
  tabIndex.value = index;
};
</script>

<template>
  <div class="swiper-pages">
    <img class="banner-icon" src="/images/index/banner-icon.png" alt="" />
    <div class="login-box">
      <div class="tab">
        <div
          class="tab-item"
          :class="{ active: tabIndex === 0 }"
          @click="handleTab(0)"
        >
          扫码登录
        </div>
        <div
          class="tab-item"
          :class="{ active: tabIndex === 1 }"
          @click="handleTab(1)"
        >
          账号登录
        </div>
      </div>
      <div class="tab-cotent">
        <div class="tab-content-item" v-if="tabIndex === 0">
          <p>使用新闪支付APP扫码识别</p>
          <img src="/images/index/banner1.png" alt="" />
        </div>
        <div class="tab-content-item" v-if="tabIndex === 1">
          <div class="login-input"></div>
        </div>
      </div>
      <div class="login-footer">
        <NuxtLink to="/register"><span>没有账户，去注册</span></NuxtLink>
        <NuxtLink to="/forgot"><span>忘记密码</span></NuxtLink>
      </div>
    </div>
    <div class="pages-footer">
      <div class="content">
        <div class="footer-item">
          <p class="title">最新公告</p>
        </div>
        <div class="footer-item">
          <p class="title">关于平台收付通二级商户进件...</p>
          <p class="txt">
            基于监管相关要求和保障用户体验的持续优化，我们针对平台收付通二级商户的入驻流程进行了相关改动...
          </p>
        </div>
        <div class="footer-item">
          <p class="title">关于平台收付通二级商户进件...</p>
          <p class="txt">
            基于监管相关要求和保障用户体验的持续优化，我们针对平台收付通二级商户的入驻流程进行了相关改动...
          </p>
        </div>
        <div class="footer-item">
          <p class="title">关于平台收付通二级商户进件...</p>
          <p class="txt">
            基于监管相关要求和保障用户体验的持续优化，我们针对平台收付通二级商户的入驻流程进行了相关改动...
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.swiper-pages {
  height: 100%;
  width: 100%;
  background-image: url("/images/index/banner1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;

  .banner-icon {
    display: block;
    width: 737px;
    height: 410px;
    position: absolute;
    left: 80px;
    top: 100px;
  }
  .login-box {
    position: absolute;
    right: 300px;
    top: 167px;
    width: 330px;
    min-height: 409px;
    background: #ffffff;
    box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px 10px 10px 10px;
    padding: 20px;
    box-sizing: border-box;
    .tab {
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid #dddddd;
      .tab-item {
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        padding-bottom: 10px;
        cursor: pointer;
        transition: color 0.1s ease;
        &.active {
          font-weight: 600;
          font-size: 14px;
          color: #222222;
          border-bottom: 3px solid #e12010;
        }
      }
    }
    .tab-cotent {
      padding-top: 20px;
      box-sizing: border-box;
      .tab-content-item {
        &:first-child {
          height: 100%;
          text-align: center;
          p {
            font-weight: 400;
            font-size: 14px;
            color: #9a9a9a;
          }
          img {
            width: 238px;
            height: 243px;
            margin: 15px auto 0 auto;
            display: block;
          }
        }
      }
    }
    .login-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      span {
        cursor: pointer;
        font-weight: 400;
        font-size: 14px;
        color: #9a9a9a;
      }
    }
  }
  .pages-footer {
    height: 167px;
    background: #e12010;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding-top: 35px;
    box-sizing: border-box;
    .content {
      display: flex;
      justify-content: space-between;
    }
    .footer-item {
      width: 295px;
      float: left;
      .title {
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
      }
      .txt {
        line-height: 17px;
        margin-top: 5px;
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
      }
    }
  }
}
</style>
